<template>
  <div class="login-container">
    <div class="box">
      <div
        id="map"
        :style="{ height: '800px', width: '100%' }"
        ref="myEchart"
      ></div>
    </div>
  </div>
</template>
<script>
// import "../assets/henan1";
//   import JSON from 'echarts/map/json/province/henan.json';
// import "./assets/beijing.js";
import * as echarts from "echarts";
const henanJson = require("./henan.json");
export default {
  name: "LoginIndex",
  components: {},
  props: {},
  data() {
    return {
      regions: [
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "郑州市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#acb159", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#39B54A", // 城市颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "开封市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#acb159", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#6739B6", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "信阳市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#acb159", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#FBBD08", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "驻马店市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#acb159", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#0081FF", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "南阳市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#1FF2CB", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "周口市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#E03997", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "平顶山市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#F2501F", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "漯河市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#24A7F2", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "许昌市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#21D1F2", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "洛阳市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#9C26B0", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "三门峡市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#C23531", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "济源市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#AFAA29", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "新乡市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#1CBBB4", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "焦作市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#A7F22E", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "安阳市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#89AF29", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "鹤壁市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#D6E029", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "濮阳市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#5A2E70", // 整个省份的颜色
            },
          },
        },
        {
          // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
          name: "商丘市", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)
          itemStyle: {
            normal: {
              opacity: 0.5, // 透明度
              borderColor: "#e6731c", // 省份界线颜色
              borderWidth: 0.5, // 省份界线的宽度
              areaColor: "#A5673F", // 整个省份的颜色
            },
          },
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.init(this.regions);
  },
  methods: {
    init(regions) {
      let myChart = echarts.init(document.getElementById("map"));
      echarts.registerMap("henan", henanJson);
      let option = {
        tooltip: {
          show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
          trigger: "item", //触发类型。item,axis,none
          enterable: true, //鼠标是否可进入提示框浮层中，默认为false，
          showContent: true, //是否显示提示框浮层
          triggerOn: "click", //提示框触发的条件(mousemove|click|none)
          showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
          textStyle: {
            color: "#58F6F5",
            fontSize: 12,
          },
          padding: [0, 8],
          hideDelay: 10, //浮层隐藏的延迟
          formatter: (e) => {
            let data = e.data;
            //此处将各等级景点数量表示为0-10内的随机整数
            data.five = data.dianxin;
            data.four = data.liantong;
            data.three = data.yidong;
            // data.four = (Math.random() * 10) | 0;
            // data.three = (Math.random() * 10) | 0;
            // data.two = (Math.random() * 10) | 0;
            // data.one = (Math.random() * 10) | 0;
            //景点数量 - 五个等级之和
            // data.number =
            //   data.five + data.four + data.three + data.two + data.one;
            //字符串模板
            let context = `
               <div>
                   <p onclick="myAerlt()" style="line-height: 30px; font-weight: 600">${data.name}</p>
                   <p><span>总数 : </span><span>${data.value}</span></p>
                   <p><span>电信 : </span><span>${data.five}</span></p>
                   <p><span>联通 : </span><span>${data.four}</span></p>
                   <p><span>移动 : </span><span>${data.three}</span></p>
               </div>
            `;
            return context;
          },
          backgroundColor: "#1D2D3D", //提示框浮层的背景颜色。
          alwaysShowContent: true,
          transitionDuration: 1, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
        },

        // backgroundColor: '#fff', // 图表背景色
        geo: {
          map: "henan",
          show: true,
          silent: true,
          zlevel: 1,
          regions: regions,
        },
        series: [
          {
            animation: true,
            name: "henan",
            type: "map",
            zoom: 1,
            // roam: true,
            label: {
              show: false,
            },
            mapType: "henan", // 自定义扩展图表类型

            itemStyle: {
              normal: { label: { show: true } },

              emphasis: {
                areaColor: "#89b7e5",

                label: { show: true },
              },
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    color: "#444",
                    fontWeight: 600,
                  },
                },
              },
            },
            data: [
              {
                name: "郑州市",
                value: 1604,
                yidong: 1593,
                liantong: 10,
                dianxin: 1,
              },
              {
                name: "三门峡市",
                value: 281,
                yidong: 0,
                liantong: 281,
                dianxin: 0,
              },
              {
                name: "平顶山市",
                value: 865,
                yidong: 598,
                liantong: 267,
                dianxin: 0,
              },
              {
                name: "开封市",
                value: 1262,
                yidong: 1262,
                liantong: 0,
                dianxin: 0,
                //   itemStyle: {
                //   borderColor: "#000", // 省份界线颜色
                //   borderWidth: 10, // 省份界线的宽度

                //   shadowColor: "#000",

                //   shadowBlur: 10,
                // },
              },
              {
                name: "洛阳市",
                value: 1341,
                yidong: 345,
                liantong: 996,
                dianxin: 0,
              },
              {
                name: "安阳市",
                value: 2095,
                yidong: 1237,
                liantong: 858,
                dianxin: 0,
              },
              {
                name: "鹤壁市",
                value: 499,
                yidong: 404,
                liantong: 95,
                dianxin: 0,
              },
              {
                name: "新乡市",
                value: 904,
                yidong: 904,
                liantong: 0,
                dianxin: 0,
              },
              {
                name: "焦作市",
                value: 1256,
                yidong: 1256,
                liantong: 0,
                dianxin: 0,
              },
              {
                name: "濮阳市",
                value: 1102,
                yidong: 283,
                liantong: 819,
                dianxin: 0,
              },
              {
                name: "许昌市",
                value: 978,
                yidong: 978,
                liantong: 0,
                dianxin: 0,
              },
              {
                name: "漯河市",
                value: 339,
                yidong: 183,
                liantong: 156,
                dianxin: 0,
              },
              {
                name: "南阳市",
                value: 2642,
                yidong: 2288,
                liantong: 354,
                dianxin: 0,
              },
              {
                name: "商丘市",
                value: 1231,
                yidong: 461,
                liantong: 770,
                dianxin: 0,
              },
              {
                name: "信阳市",
                value: 1297,
                yidong: 1297,
                liantong: 0,
                dianxin: 0,
              },
              {
                name: "周口市",
                value: 2546,
                yidong: 0,
                liantong: 2546,
                dianxin: 0,
              },
              {
                name: "驻马店市",
                value: 1681,
                yidong: 483,
                liantong: 1198,
                dianxin: 0,
              },
              {
                name: "济源市",
                value: 158,
                yidong: 77,
                liantong: 81,
                dianxin: 0,
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
      myChart.on("click", function (params) {
        console.log(params);
        console.log(regions);
        for (var i = 0; i < regions.length; i++) {
          console.log(regions[i].name);
          if (params.name == regions[i].name) {
            //  shadowColor: "#000",
            //               shadowOffsetX: -5,
            //               shadowOffsetY: -5,
            //               borderColor: "#000", // 省份界线颜色
            //               borderWidth: 1,
            regions[i].itemStyle.normal["shadowColor"] = "#000";
            regions[i].itemStyle.normal["shadowOffsetX"] = -5;
            regions[i].itemStyle.normal["shadowOffsetY"] = -5;
            regions[i].itemStyle.normal["borderColor"] = "#000";
            regions[i].itemStyle.normal["borderWidth"] = "1";
           
            myChart.setOption(option);
            regions[i].itemStyle.normal["shadowColor"] = "";
            regions[i].itemStyle.normal["shadowOffsetX"] = '';
            regions[i].itemStyle.normal["shadowOffsetY"] = '';
            regions[i].itemStyle.normal["borderColor"] = "";
            regions[i].itemStyle.normal["borderWidth"] = "";
            console.log(regions[i].itemStyle);
          }
       
        }
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>